<template>
    <div>
        <!-- 查询 -->
        <el-row class="elRow">
            <el-col class="p-4">
                <el-button class="mr-3" type="primary" @click="add"><el-icon class="mr-1" color="#fff"><Plus /></el-icon>创建方案</el-button>
                <span>标题
                    <el-select v-model="query.category_ids" class="ya-search-value mr-6" placeholder="类别">
                        <el-option value="" label="全部" />
                        <el-option value="3" label="足球" />
                        <el-option value="4" label="篮球" />
                    </el-select>
                </span>
                <span>广告类型
                    <el-select v-model="query.category_ids" class="ya-search-value mr-6" placeholder="类别">
                        <el-option value="" label="全部" />
                        <el-option value="3" label="足球" />
                        <el-option value="4" label="篮球" />
                    </el-select>
                </span>
                <span>状态
                    <el-select v-model="query.category_ids" class="ya-search-value mr-6" placeholder="类别">
                        <el-option value="" label="全部" />
                        <el-option value="3" label="足球" />
                        <el-option value="4" label="篮球" />
                    </el-select>
                </span>

                <el-button class=" ml-10 mr-2" type="primary" @click="search()">查询</el-button>
                <el-button class="" title="重置" @click="refresh()">重置 </el-button>
            </el-col>
        </el-row>
        <div class="p-4 pt-0">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="封面" />
                <el-table-column prop="name" label="标题" />
                <el-table-column prop="name" label="广告类型" />
                <el-table-column prop="name" label="曝光量" />
                <el-table-column prop="name" label="有效时间" />
                <el-table-column prop="name" label="状态" />
                <el-table-column prop="name" label="指定分销商" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button class="operation-button" type="primary" size="small" :underline="false" @click="() => {
                            $emit('handle-edit', scope.row)
                            }">
                        修改
                        </el-button>
                        <el-button class="operation-button mt-2" type="primary" size="small" plain :underline="false" @click="istop(scope.row)">
                            {{ scope.row.is_top ? '取消置顶' : '置顶' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { shortcuts } from '@/utils/index'
export default {
    data () {
        return {
            dateShortcuts: shortcuts,
            query: {
                date_field: '',
                category_ids: '',
                date_value: '',
            },
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ]
        }
    },
    mounted () {

    },
    methods: {
        search () {

        },
        refresh () {

        }
    }
}
</script>